<template>
  <div>
    <base-right-dialog
      ref="baseRightDialog"
      :footerShow="true"
      :dialogVisible.sync="dialogVisible"
      title="新增角色-用户权限"
      :type="dialogType"
      @handleClose="handleDialogClose"
      @handleConfirmClick="handleConfirmClick"
      :size="'820px'"
      :submitShow="submitShow"
    >
      <div class="dialogList">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;font-size:12px;"
          @row-click="rowClick"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="loginName" label="登录名称" align="center"></el-table-column>
          <el-table-column prop="viewName" label="用户名称" align="center"> </el-table-column>
          <el-table-column prop="state" label="启用状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.state == '1'" style="color: #75c560"
                >启用</span
              >
              <span v-else style="color: #f56c6c">停用</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </base-right-dialog>
  </div>
</template>

<script>
import baseRightDialog from "@/components/base/baseRightDialog";
import baseForm from "@/components/base/baseNewForm";
import configData from "./configData";
import { authApi } from "@/api/apis/auth";
export default {
  components: {
    baseRightDialog,
    baseForm,
  },
  data() {
    return {
      dialogVisible: false,
      dialogType: "",
      formRow: [],
      basicsRules: configData.basicsRules,
      loading: false,
      submitShow: true,
      tableData: [],
      multipleSelection: [],
      rolesId: [],
    };
  },
  methods: {
    // 保存
    async handleConfirmClick() {
      let userIds = [];
      this.$refs.multipleTable.selection.forEach((el) => {
        userIds.push(el.id);
      });
      let params = {
        id: this.rolesId,
        userIds,
      };
      let res = await authApi("roleService", "role", "addRoleUser", "", params);
      if (res.status == "200") {
        this.handleDialogClose();
        this.$vmNews("添加成功", "success");
        this.$emit("userUnderRole");
      }
    },
    // 关闭
    handleDialogClose() {
      this.dialogVisible = false;
    },
    rowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    openDialog(type, row, el, id) {
      if (el == false) {
        this.$vmNews("请点击左侧选择角色", "warning");
      } else {
      this.dialogVisible = true;
      this.submitShow = true;
      this.rolesId = id;
      this.init(row);
      }
    },
    async init(row) {
      this.loading = true;
      let params = {
        state:"1"
      };
      let res = await authApi("userService", "user", "queryAll", "", params);
      this.loading = false;
      if (res.status == "200") {
        this.tableData = res.attribute;
        this.$nextTick(() => {
          this.tableData.forEach((item) => {
            if (row.indexOf(item.id) >= 0) {
              this.$refs.multipleTable.toggleRowSelection(item, true);
            }
          });
        });
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-form-item__content .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
</style>
